<template>
  <!-- 研发 -->
  <div class="layout">
    <div class="shouye">
      <span>研发首页</span>
    </div>
    <div style="background: white;padding: 5px;">
      <div class="options">
        <div style="padding: 5px">经营异常报告</div>
        <div>
          <el-input v-model="pevent" size="mini" style="width: 168px;margin-right: 5px;" />
          <el-button type="primary" size="mini" @click="headlines">搜索</el-button>
        </div>
      </div>
      <jc-table
        serial
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        @clickRow="headlineDetail"
      >
        <template v-slot:billSlot="col">
          <el-link type="primary" class="shijian" @click="headlineDetail(col.scope.row)" v-html="col.scope.row.pevent" />
        </template>
        <template v-slot:btnSlot="col">
          <el-button-group>
            <el-button type="warning" size="mini" @click="headlinesEdit(col.scope.row)">{{ $t('btn.edit') }}</el-button>
            <el-button type="danger" size="mini" @click="waterDel(col.scope.row, 1)">删除</el-button>
          </el-button-group>
        </template>
      </jc-table>
      <div style="margin-top: 5px;">
        <jc-pagination
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="headlines"
        />
      </div>
    </div>
    <!--    <hr class="hr1">-->
    <div class="form_body">
      <div>
        <jc-title title1="待处理资料清单" :division="false" />
      </div>
      <pending />
    </div>
    <jc-title title1="快捷导航" :division="false" />
    <hr class="hr1">
    <div class="skipUrl">
      <el-button v-for="item in saleData" :key="item.name" type="success" plain @click="newlyOrder(item.path)">{{ item.name }}</el-button>
    </div>
    <div class="ranking_list">
      <div class="ranking">
        <jc-title title1="资料异常清单" :division="false" />
        <abnormal />
      </div>
      <div class="ranking">
        <jc-title title1="打样订单清单" :division="false" />
        <drawDesign />
      </div>
    </div>
  </div>
</template>

<script>
import { queryPooAmount } from '@/api/homePage/business'
import jcTitle from '@/components/Title'
import searData from '@/components/Search/mixin'
import pending from '@/views/homePageNew/research/component/pending'
import abnormal from '@/views/homePageNew/research/component/abnormal'
import drawDesign from '@/views/homePageNew/research/component/drawDesign'
export default {
  name: 'Financing',
  components: {
    jcTitle,
    pending,
    abnormal,
    drawDesign
  },
  mixins: [searData],
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 200,
      ftype: 2052,
      tableHeight: '350px',
      pevent: '',
      tableData: [],
      tableHeader: [
        { label: '异常日期', prop: '', width: '100px' },
        { label: '异常事项', prop: '', type: 'bill' },
        { label: '异常部门', prop: '', width: '200px' },
        { label: '部门负责人', prop: '', width: '200px' },
        { label: '操作', type: 'btn', width: '200px' }
      ],
      // 销售头部
      headerInfo: {},
      saleData: [
        { name: this.$t('menu.marketManage'), path: '/marketOrder' },
        { name: '生产订单', path: '/proOrderList' },
        { name: '公司商城', path: '/shopping' }
      ]
    }
  },
  created() {
    this.pooAmount()
  },
  methods: {
    // 跳转
    newlyOrder(path) {
      this.$router.push({ path: path })
    },
    // 表头
    pooAmount() {
      queryPooAmount({}).then(res => {
        if (res.code === 0) {
          this.headerInfo = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import 'src/styles/homePage';
.options {
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.header {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 0 5px;
  li {
    list-style: none;
    width: 12%;
    min-width: 165px;
    height: 70px;
    padding: 10px;
    background-color: rgb(64,158,255,0.1);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .firstHead {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 16px;
      color: #FFF;
      background: #409EFF;
      padding: 5px 0;
      font-weight: 600;
      letter-spacing: 2px;
    }
    .lastHead {
      font-size: 28px;
      color: #666;
      line-height: 75px;
      font-weight: 500;
    }
  }
}
.hr1 {
  margin: 4px;
}
.form_body1 {
  .header-name {
    position: relative;
    top: -5px;
    margin-bottom: 10px;
    .btn {
      margin-left: 450px;
      transform: translateY(18%);
    }
  }
}
</style>
